<template>
  <div class="message-manage">
    <template v-if="!loading">
      <div class="empty-box" v-if="!dataList.length">
        <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g id="Frame 48096718" opacity="0.5">
          <g id="Group 48096695">
          <g>
          <path d="M17.0132 23.5969H38.3512" stroke="white" stroke-linecap="round"/>
          <path d="M17.0132 34.5229H38.3512" stroke="white" stroke-linecap="round"/>
          <path d="M17.146 45.449H23.389" stroke="white" stroke-linecap="round"/>
          <path d="M23.2722 58.9319H15.8152C13.9501 58.9319 12.1614 58.1911 10.8425 56.8724C9.52358 55.5536 8.78249 53.765 8.78223 51.8999V19.7649C8.78223 17.8997 9.5232 16.1108 10.8421 14.7919C12.1611 13.4729 13.95 12.7319 15.8152 12.7319H39.5502C41.4153 12.7322 43.2039 13.4733 44.5227 14.7922C45.8414 16.1111 46.5822 17.8998 46.5822 19.7649V33.9499" stroke="white" stroke-miterlimit="10" stroke-linecap="round"/>
          </g>
          <g>
          <path d="M66.2214 58.148L33.1008 67.8514C31.7167 68.2568 30.2366 68.1859 28.8977 67.6499C27.5587 67.1139 26.4385 66.144 25.7165 64.8955L24.373 62.5684C23.6513 61.3189 23.3704 59.8631 23.5754 58.4347C23.7803 57.0064 24.4593 55.6883 25.5033 54.6921L50.4669 30.8604" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M68.0134 57.4554C72.5543 54.8337 72.6224 46.4504 68.1655 38.7307C63.7085 31.0111 56.4143 26.8784 51.8734 29.5001C47.3325 32.1218 47.2644 40.5051 51.7214 48.2247C56.1783 55.9444 63.4725 60.0771 68.0134 57.4554Z" stroke="white" stroke-miterlimit="10"/>
          <path d="M61.8435 46.7672C62.912 46.1503 62.928 44.1776 61.8792 42.3611C60.8305 40.5445 59.114 39.572 58.0455 40.1889C56.977 40.8058 56.9611 42.7785 58.0098 44.5951C59.0586 46.4116 60.775 47.3841 61.8435 46.7672Z" stroke="white" stroke-miterlimit="10"/>
          <path d="M48.7466 41.1721L58.0458 40.1888" stroke="white" stroke-miterlimit="10"/>
          <path d="M61.8431 46.7663L56.3419 54.328" stroke="white" stroke-miterlimit="10"/>
          <path d="M37.2098 43.6738C37.3651 47.6099 38.4961 51.4457 40.5013 54.8363C42.5064 58.2269 45.3228 61.0661 48.6971 63.0985" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M31.673 49.3622C32.1043 52.5476 33.1839 55.6108 34.8452 58.3627C36.5065 61.1147 38.7142 63.4968 41.3321 65.3622" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
          </g>
          <path d="M60.634 14.1966L62.2697 17.7529L62.347 17.921L62.5151 17.9983L66.0711 19.6338L62.5142 21.2687L62.3461 21.346L62.2687 21.5141L60.6331 25.0702L58.9983 21.5141L58.921 21.346L58.7529 21.2687L55.1968 19.6339L58.7529 17.9983L58.921 17.921L58.9983 17.7529L60.634 14.1966Z" stroke="white"/>
          <path d="M76.3168 32.197L76.9067 33.4808L76.9839 33.6489L77.1521 33.7263L78.436 34.3168L77.1522 34.9067L76.984 34.984L76.9067 35.1522L76.3168 36.436L75.7263 35.1521L75.6489 34.9839L75.4808 34.9067L74.197 34.3168L75.4809 33.7263L75.649 33.649L75.7263 33.4809L76.3168 32.197Z" stroke="white"/>
          </g>
          </g>
        </svg>
        <p class="fs12">通知空空如也，敬请期待新通知的到来！</p>
      </div>
      <div class="message-content" v-else>
        <div class="message-aside">
          <div class="aside-header">
            <span class="all-read-btn" @click="allRead">全部已读</span>
          </div>
          <ul class="message-menu">
            <li v-for="item in dataList"
              :key="item.id"
              class="list-item"
              :class="{active:selectMsg.id===item.id,'un-read':item.status === 'unread'}"
              @click="onMsgClick(item)">{{ item.title }}</li>
          </ul>
        </div>
        <div class="message-info">
          <div class="info-header">
            <span class="info-title">{{ selectMsg.title }}</span>
            <span class="info-time">{{ selectMsg.created_at*1000 | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
          </div>
          <div v-html="selectMsg.content" class="info-content" @click="targetNodeNameClick"></div>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import Emitter from 'element-ui/lib/mixins/emitter'
import { getMessageList, readMessage, readAllMessage } from '@/api/user'
export default {
  name: 'MessageList',
  mixins: [Emitter],
  data () {
    return {
      page: 1,
      pageSize: 1000,
      loading: true,
      selectMsg: {},
      dataList: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      const params = {
        page: this.page,
        page_size: this.pageSize
      }
      this.loading = true
      getMessageList(params).then(res => {
        const list = res.data?.list || []
        this.dataList = list
        this.onMsgClick(list[0] || {})
      }).finally(() => {
        this.loading = false
      })
    },
    onMsgClick (item) {
      if (item.status === 'unread') {
        readMessage({ id: item.id }).then(res => {
          item.status = 'read'
        })
        this.dispatch('Layout', 'msg-change', true)
      }
      this.selectMsg = item
    },
    allRead () {
      readAllMessage().then(() => {
        this.dataList.forEach(it => {
          it.status = 'read'
        })
        this.dispatch('Layout', 'msg-change', false)
      })
    },
    targetNodeNameClick (event) {
      if (event.target.nodeName === 'A') {
        event.preventDefault()
        // 使用浏览器打开
        const url = event.target.getAttribute('href')
        if (url) {
          this.$xz('xz_open_url', url)
        }
        return false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.message-manage.main-content{
  height: 100%;
  padding: 15px 25px;
}
.empty-box{
  padding-top: 20%;
  text-align: center;
}
.aside-header{
  padding-right: 20px;
  text-align: right;
}
.all-read-btn{
  font-size: 12px;
  cursor: pointer;
  &:hover{
    color: #2FC670;
  }
}
.message-content{
  display: flex;
  height: 100%;
}
.message-aside{
  flex: 0 0 145px;
  border-right: 1px solid rgba($color: #fff, $alpha: 0.1);
  overflow: hidden;
  .list-item{
    position: relative;
    margin-top: 20px;
    padding-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    cursor: pointer;
    &::before{
      content: ' ';
      display: inline-block;
      width: 3px;
      height: 18px;
      margin-right: 11px;
      vertical-align: -0.2rem;
      background: transparent;
      border-radius: 29px
    }
    &::after{
      position: absolute;
      left: 5px;
      top: 8px;
      content: ' ';
      display: none;
      width: 4px;
      height: 4px;
      background: #FC5B42;
      border-radius: 50%;
    }
    &:hover{
      color: #2FC670;
    }
    &.un-read{
      &::after{
        display: inline-block;
      }
    }
    &.active{
      color: #2FC670;
      // font-weight: bold;
      &::before{
        background: #2FC670;
      }
    }
  }
}
.message-menu{
  height: 100%;
  overflow-y: auto;
}
.message-info{
  flex: 1;
  margin-left: 24px;
  overflow: hidden;
  .info-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .info-title{
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
    font-size: 18px;
    color: #FFFFFF;
  }
  .info-time{
    margin-left: 9px;
    flex-shrink: 0;
    word-break: keep-all;
    white-space: nowrap;
    font-size: 12px;
  }
  .info-content{
    margin-top: 9px;
    height: 100%;
    overflow-y: auto;
    line-height: 24px;
    user-select: text;
    /deep/img{
      margin-top: 5px;
      max-width: 100%;
    }
    /deep/a{
      color: #2FC670;
      &:hover{
        text-decoration: underline;
      }
    }
  }
}
</style>
